'use client';

import { cn } from '@workspace/ui/lib/utils';
import { motion, type SVGMotionProps } from 'motion/react';

const pathVariants = {
  hidden: {
    pathLength: 0,
    fillOpacity: 0,
  },
  visible: {
    pathLength: 1,
    fillOpacity: 1,
    transition: {
      duration: 1.5,
      ease: 'easeInOut',
    },
  },
} as const;

const sizes = {
  xs: 'h-5.5',
  sm: 'h-7',
  md: 'h-8',
  lg: 'h-12',
  xl: 'h-14',
};

export const Logo = ({
  draw = false,
  size = 'sm',
  className,
  containerClassName,
  ...props
}: {
  containerClassName?: string;
  draw?: boolean;
  size?: keyof typeof sizes;
} & SVGMotionProps<SVGSVGElement>) => {
  return (
    <div className={cn('relative', containerClassName)}>
      <motion.svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 4932.44 822.54"
        className={cn(sizes[size], className)}
        {...props}
      >
        <motion.path
          variants={draw ? pathVariants : {}}
          initial={draw ? 'hidden' : false}
          animate={draw ? 'visible' : false}
          stroke="currentColor"
          strokeWidth={10}
          className="fill-neutral-900 dark:fill-neutral-100"
          d="M1398.56 146.18 1177.8 692.64h111.94l38.89-101.83h224.17l38.54 101.83h112.71l-218.43-546.46zm-36.09 356.02 78.75-206.19 78.04 206.19zM2033.25 330.02c-21.51-13.73-46.25-20.6-74.24-20.6s-54.02 6.22-76.57 18.66c-12.2 6.73-22.94 14.88-32.26 24.42v-35.3h-101.83v375.45h101.83V477.33c0-14.5 3.23-27.59 9.72-39.25q9.705-17.49 26.82-26.82c11.39-6.22 24.35-9.33 38.87-9.33 21.77 0 39.64 7 53.64 20.99s20.99 32.14 20.99 54.41v215.32h102.61V454.01c0-24.88-6.22-48.32-18.66-70.35-12.44-22.02-29.42-39.9-50.91-53.64ZM2168.89 317.2h103.38v375.45h-103.38zM2220.97 139.96c-16.59 0-30.32 5.71-41.2 17.1-10.88 11.41-16.32 25.14-16.32 41.2s5.44 30.45 16.32 41.59c10.88 11.15 24.61 16.71 41.2 16.71s30.96-5.56 41.59-16.71c10.62-11.14 15.93-25 15.93-41.59s-5.32-29.79-15.93-41.2c-10.63-11.39-24.49-17.1-41.59-17.1M2866.15 326.91c-22.29-11.66-47.42-17.49-75.4-17.49s-53.38 6.1-76.18 18.27c-18.12 9.68-33.52 22.38-46.24 38.11-11.59-16.2-26.23-29.17-43.93-38.88q-31.875-17.49-70.74-17.49c-27.47 0-52.08 5.83-73.85 17.49-11.67 6.25-22.03 13.9-31.09 22.91V317.2h-101.83v375.45h101.83V471.89c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.03-18.27 25.65-23.71s22.66-8.16 36.15-8.16c20.21 0 37.04 6.1 50.53 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h102.61V471.9c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.02-18.27 25.65-23.71 10.62-5.44 22.93-8.16 36.92-8.16 19.69 0 36.27 6.1 49.75 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h103.38V455.58c0-30.57-6.61-56.75-19.82-78.51-13.21-21.77-30.97-38.48-53.25-50.14ZM3270.35 352.62c-10.39-10.75-22.56-19.72-36.54-26.88-21.25-10.88-45.08-16.32-71.51-16.32-34.73 0-65.69 8.55-92.89 25.65-27.21 17.1-48.58 40.42-64.13 69.96s-23.32 62.96-23.32 100.28 7.77 69.96 23.32 99.5 36.92 52.86 64.13 69.96 57.91 25.65 92.11 25.65c26.94 0 51.17-5.44 72.68-16.32 13.89-7.03 25.93-15.85 36.15-26.45v35h102.61V317.2h-102.61v35.43Zm-20.21 224.98c-17.62 19.18-40.69 28.76-69.18 28.76-18.15 0-34.47-4.4-48.97-13.21-14.51-8.81-25.79-20.72-33.81-35.76-8.04-15.02-12.05-32.65-12.05-52.86s4.01-37.04 12.05-52.08c8.03-15.02 19.17-26.94 33.43-35.76 14.25-8.81 30.71-13.21 49.36-13.21s35.76 4.28 49.75 12.83 25.13 20.6 33.43 36.15c8.28 15.55 12.44 33.17 12.44 52.86 0 29.03-8.82 53.13-26.43 72.29ZM3603.04 160.95h-101.83V317.2h-87.84v89.39h87.84v286.06h101.83V406.59h87.84V317.2h-87.84zM4001.03 332.74c-27.98-16.06-59.6-24.1-94.83-24.1-37.31 0-71 8.55-101.05 25.65q-45.09 25.65-71.13 69.96c-17.37 29.54-26.04 62.96-26.04 100.28s8.81 71.51 26.43 101.05c17.61 29.54 41.84 52.86 72.68 69.96q46.245 25.65 105.33 25.65c30.57 0 58.81-5.44 84.73-16.32 25.91-10.88 48.45-27.21 67.63-48.97l-60.63-60.63c-11.4 13.48-24.87 23.32-40.42 29.54s-32.92 9.33-52.08 9.33c-21.25 0-39.91-4.4-55.97-13.21-16.07-8.81-28.37-21.63-36.92-38.48-3.4-6.69-6.11-13.85-8.15-21.48l274.39-.67c2.06-8.28 3.36-15.93 3.89-22.93.51-7 .78-13.86.78-20.6 0-36.27-7.77-68.66-23.32-97.17-15.55-28.49-37.31-50.78-65.3-66.85ZM3810.6 464.77c1.88-6.99 4.34-13.56 7.37-19.7 8.03-16.32 19.55-28.88 34.59-37.7 15.02-8.81 32.65-13.21 52.86-13.21 19.17 0 35.24 3.89 48.2 11.66 12.95 7.77 23.05 19.18 30.32 34.2 3.49 7.23 6.19 15.32 8.12 24.23l-181.45.52ZM4615.11 485.1c0 23.84-5.05 44.58-15.16 62.19-10.11 17.62-23.59 31.23-40.42 40.81-16.85 9.59-36.41 14.38-58.69 14.38s-42.24-4.79-59.85-14.38c-17.62-9.58-31.62-23.19-41.98-40.81-10.37-17.61-15.55-38.6-15.55-62.96V146.18h-106.49v335.03c0 41.98 9.72 79.56 29.15 112.71 19.43 33.17 45.98 59.34 79.68 78.51 33.68 19.18 72.03 28.76 115.05 28.76s81.1-9.58 114.27-28.76q49.74-28.755 78.12-78.12c18.91-32.9 28.37-70.35 28.37-112.33v-335.8h-106.5zM4810.21 146.18h105.72v546.46h-105.72zM633 131.82c-20.81-35.55-50.62-64.69-86.19-84.28-33.43-18.41-71.43-28.14-109.9-28.14s-76.47 9.73-109.9 28.14c-35.57 19.59-65.38 48.73-86.19 84.28L48.13 460.89c-21.02 35.9-31.85 76.55-31.32 117.54.5 38.49 10.97 76.62 30.27 110.29s46.92 61.97 79.88 81.85c35.11 21.18 75.65 32.37 117.26 32.37h385.36c41.6 0 82.15-11.19 117.26-32.37 32.96-19.88 60.58-48.18 79.88-81.85s29.77-71.8 30.27-110.29c.54-41-10.29-81.64-31.31-117.54zm20.21 457.43c-3.58 6.25-10.59 13.69-23.63 13.69H244.22c-13.04 0-20.05-7.44-23.63-13.69s-6.46-16.05.13-27.31L413.4 232.87c6.52-11.14 16.38-13.47 23.5-13.47s16.98 2.34 23.5 13.47l192.68 329.07c6.59 11.25 3.71 21.06.12 27.31Z"
        ></motion.path>
      </motion.svg>

      <span className="sr-only">Animate UI</span>
    </div>
  );
};
